<template>
  <div>
    <!--header start-->
    <header :class="['header-con','header-w-bg']">
      <router-link to='/membercenter'>
        <a>
          <i class='back-icon'></i>
        </a>
      </router-link>
      <h1 class='header-tit'>我的消息</h1>
      <a href="#">
        <i class="hd-search-icon"></i>
      </a>
    </header>
    <!--header end-->
    <tab-ctl :tabctl="tabCtl" @tabChange="tabChange"></tab-ctl>
    <div class="my-order-page">
      <ul class="my-order-list">
        <template v-if="orderType=='ALL'">
          <li v-for="item in myOrder.content.content">
            <div class="order-list-hd flex-box">
              <div class="order-num list-flex">{{item.orderCode}}</div>
              <div class="order-status">{{item.b2cOrderStatic}}</div>
            </div>
            <a href="../travel/travelOrderDetails.html" class="order-list-bd flex-box">
              <i class="order-type gty">跟团游</i>
              <div class="order-img"><img :src="item.picUrl" alt=""></div>
              <div class="order-info list-flex">
                <h2>{{item.productName}}</h2>
                <p>出发日期：<span>{{item.deptDateStr}}</span></p>
                <p>出游人数：<span>{{item.num}}</span></p>
              </div>
            </a>
            <div class="order-list-ft flex-box">
              <div class="order-price list-flex">￥<span>{{item.totalAmount}}</span></div>
              <div class="order-btn">
                <a href="invoicing.html" class="bordbox active">开具发票</a>
                <a href="#" class="bordbox">删除订单</a>
              </div>
            </div>
          </li>
        </template>
        <li>
          <div class="order-list-hd flex-box">
            <div class="order-num list-flex">201609260000865</div>
            <div class="order-status">已付款</div>
          </div>
          <a href="../travel/travelOrderDetails.html" class="order-list-bd flex-box">
            <i class="order-type gty">跟团游</i>
            <div class="order-img"><img src="http://www.gzl.com.cn/b2c-image/2017/6/29/f5c11f28-c26a-4bff-97a5-5f79c135b9de_480X320.jpg" alt=""></div>
            <div class="order-info list-flex">
              <h2>ClubMed马尔代夫卡尼岛6天4晚（2高＋2水）广州往返 ...</h2>
              <p>出发日期：<span>2016-10-21</span></p>
              <p>出游人数：<span>1</span></p>
            </div>
          </a>
          <div class="order-list-ft flex-box">
            <div class="order-price list-flex">￥<span>20899</span></div>
            <div class="order-btn">
              <a href="invoicing.html" class="bordbox active">开具发票</a>
              <a href="#" class="bordbox">删除订单</a>
            </div>
          </div>
        </li>
        <li>
          <div class="order-list-hd flex-box">
            <div class="order-num list-flex">201609260000865</div>
            <div class="order-status pending">待付款</div>
          </div>
          <a href="../cruise/cruiseOrderDetails.html" class="order-list-bd flex-box">
            <i class="order-type yl">邮轮</i>
            <div class="order-img"><img src="http://www.gzl.com.cn/b2c-image/2017/6/29/f5c11f28-c26a-4bff-97a5-5f79c135b9de_480X320.jpg" alt=""></div>
            <div class="order-info list-flex">
              <h2>皇家加勒比海洋赞礼号香港-冲绳-厦门-香港5晚6天</h2>
              <p>出发日期：<span>2016-10-21</span></p>
              <p>舱房数量：<span>1</span></p>
            </div>
          </a>
          <div class="order-list-ft flex-box">
            <div class="order-price list-flex">￥<span>50000</span></div>
            <div class="order-btn">
              <a href="#" class="bordbox active">继续支付</a>
              <a href="#" class="bordbox cancel-order">取消订单</a>
            </div>
          </div>
        </li>
        <li>
          <div class="order-list-hd flex-box">
            <div class="order-num list-flex">201609260000865</div>
            <div class="order-status">已付款</div>
          </div>
          <a href="../hotel/hotelOrderDetails.html" class="order-list-bd flex-box">
            <i class="order-type jd">酒店</i>
            <div class="order-img"><img src="http://www.gzl.com.cn/b2c-image/2017/6/29/f5c11f28-c26a-4bff-97a5-5f79c135b9de_480X320.jpg" alt=""></div>
            <div class="order-info list-flex">
              <h2>都会海逸酒店</h2>
              <p>入离日期：<span>05.27</span>-<span>05.28</span> 共<span>1</span>晚</p>
              <p>房间数量：<span>1</span></p>
            </div>
          </a>
          <div class="order-list-ft flex-box">
            <div class="order-price list-flex">￥<span>899</span></div>
            <div class="order-btn">
              <a href="#" class="bordbox">体验点评</a>
              <a href="#" class="bordbox">删除订单</a>
            </div>
          </div>
        </li>
        <li>
          <div class="order-list-hd flex-box">
            <div class="order-num list-flex">201609260000865</div>
            <div class="order-status">已完成</div>
          </div>
          <a href="../ticket/ticketOrderDetails.html" class="order-list-bd flex-box">
            <i class="order-type pq">门票</i>
            <div class="order-img"><img src="http://www.gzl.com.cn/b2c-image/2017/6/29/f5c11f28-c26a-4bff-97a5-5f79c135b9de_480X320.jpg" alt=""></div>
            <div class="order-info list-flex">
              <h2>珠海长隆海洋王国</h2>
              <p>出发日期：<span>2016-10-21</span></p>
              <p>门票数量：<span>1</span></p>
            </div>
          </a>
          <div class="order-list-ft flex-box">
            <div class="order-price list-flex">￥<span>899</span></div>
            <div class="order-btn">
              <a href="#" class="bordbox">删除订单</a>
            </div>
          </div>
        </li>
        <li>
          <div class="order-list-hd flex-box">
            <div class="order-num list-flex">201609260000865</div>
            <div class="order-status">已付款</div>
          </div>
          <a href="../visa/visaOrderDetails.html" class="order-list-bd flex-box">
            <i class="order-type qz">签证</i>
            <div class="order-img"><img src="http://www.gzl.com.cn/b2c-image/2017/6/29/f5c11f28-c26a-4bff-97a5-5f79c135b9de_480X320.jpg" alt=""></div>
            <div class="order-info list-flex">
              <h2>【广之旅】美国非移民签证陆卡专用（全国领区）</h2>
              <p>出发日期：<span>2016-10-21</span></p>
              <p>办理人数：<span>1</span></p>
            </div>
          </a>
          <div class="order-list-ft flex-box">
            <div class="order-price list-flex">￥<span>899</span></div>
            <div class="order-btn">
              <a href="#" class="bordbox">删除订单</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import TabCtl from '../../components/common/TabCtl'
  import axios from 'axios'
  import qs from 'qs'
  import weui from 'weui.js'
  import common from '../../assets/js/common'
  export default {
    name: '',
    data () {
      return {
        myOrder: {
          'resultCode': '00100000',
          'resultMsg': 'success',
          'content': {
            'pageNo': 0,
            'pageSize': 0,
            'totalElements': 0,
            'content': [{
              'orderCode': '',
              'b2cOrderStatic': '',
              'productName': '',
              'productType': '',
              'deptDate': 0,
              'startDate': null,
              'endDate': null,
              'nights': null,
              'num': '',
              'picUrl': '',
              'btnMap': {
                'invoiceBtn': false,
                'payBtn': true,
                'showCommentBtn': false,
                'toCommentBtn': false,
                'delBtn': true
              },
              'totalAmount': '',
              'mainProductId': '',
              'deptDateStr': '',
              'startDateStr': '',
              'endDateStr': ''
            }],
            'totalPages': 0
          },
          'accessToken': null
        },
        orderType: 'ALL',
        tabCtl: [
          {name: '全部', func: 'tabChange', ispick: true, orderType: 'ALL'},
          {name: '待付款', func: 'tabChange', ispick: false, orderType: 'PREPARETOTRAVEL'},
          {name: '未出行', func: 'tabChange', ispick: false, orderType: 'WAITINGTOPAY'},
          {name: '待评价', func: 'tabChange', ispick: false, orderType: 'WAITINGTOCOMMENT'}
        ]
      }
    },
    components: {
      TabCtl
    },
    created: function () {
      var self = this
      self.getMyOrder()
    },
    methods: {
      getMyOrder: function () {
        var self = this
        var config = {
          headers: {
            'access-token': common.accesstoken,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        var queryUrl = common.api.memberCenter.getMyOrder
        var data = qs.stringify({
          crmId: '1-POIUV4',
          orderType: self.orderType,
          pageNo: '1',
          pageSize: '10'
        })
        console.log(data)
        var loading = weui.loading('加载中')
        axios.post(queryUrl, data, config).then(function (res) {
          if (res.data.resultMsg === 'success') {
            self.myOrder = res.data
            loading.hide()
          } else {
            loading.hide()
            weui.toast('请求失败')
          }
        })
      },
      tabChange: function (tab) {
        var self = this
        var thisIndex = parseInt(tab.currentTarget.getAttribute('data-index'))
        self.tabCtl.forEach(function (e, i) {
          if (i === thisIndex) {
            e.ispick = true
          } else {
            e.ispick = false
          }
        })
        self.orderType = self.tabCtl[thisIndex].orderType
        self.getMyOrder()
      }
    }
  }
</script>

<style lang="scss">
  @import '../../assets/sass/member/myorder.scss';
</style>
